<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn2></cpn2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  // 1.创建一个组件(子组件)
  const cpnC1 = Vue.extend({
    template: `<div>
                 <h2>我是标题1</h2>
                 <p>我是内容,哈哈哈哈哈</p>
               </div>`
  });
  // 1.创建一个组件(父组件, root组件)
  const cpnC2 = Vue.extend({
    template: `<div>
                 <h2>我是标题2</h2>
                 <p>我是内容,呵呵呵呵呵呵</p>
                 <cpn1></cpn1>
               </div>`,
    components: {
      cpn1: cpnC1,
    }
  });

  var app = new Vue({
    el: "#app",
    components: {
      cpn2: cpnC2,
    }
  });
</script>
</html>